<template>
  <div>
    <el-row style="background:#ffffff;padding:10px">
      <el-input
        style="width:300px;float:left"
        size="small"
        v-model="mSearchKey"
        clearable
        placeholder="输入关键字"
      ></el-input>
      <el-button
        style="float:left;margin-left:10px;"
        icon="el-icon-search"
        circle
        type="primary"
        size="small"
        @click="searchCar()"
      ></el-button>

      <el-button
        type="success"
        plain
        size="small"
        icon="el-icon-refresh-right"
        style="float:right;"
        @click="getCars()"
      ></el-button>
      <el-button
        type="primary"
        plain
        size="small"
        style="float:right;margin-left:10px"
        @click="mAddCarDialog=true;mSelectRow={};mAvator=undefined"
      >添加车辆</el-button>
    </el-row>
    <el-row style="background:#ffffff">
      <el-table :data="mCars" border style="width: 100%">
        <el-table-column label="编号" prop="carId"></el-table-column>
        <el-table-column label="车牌" prop="chepai"></el-table-column>
        <!-- <el-table-column label="车辆类别" prop="type"></el-table-column> -->
        <el-table-column label="车辆品牌" prop="brand"></el-table-column>
        <el-table-column label="车辆型号" prop="name"></el-table-column>
        <el-table-column label="座位数" prop="sites"></el-table-column>
        <el-table-column label="保养日期" prop="dateBaoyang"></el-table-column>
        <el-table-column label="保险日期" prop="dateBaoxian"></el-table-column>
        <el-table-column label="车检日期" prop="dateChejian"></el-table-column>
        <el-table-column label="车辆状态" prop="strStatus"></el-table-column>
        <!-- <el-table-column label="使用状态" prop="strCarUsingStatus"></el-table-column> -->
        <!-- <el-table-column label="所属公司" prop="companyName"></el-table-column> -->
        <el-table-column label="操作" width="360">
          <template slot-scope="scope">
            <el-button @click="showRow(scope.row)" type="text">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-row style="margin-top:10px;padding-bottom:10px;background:#ffffff">
        <el-pagination
          style="float:right"
          v-if="totalPage"
          background
          layout="prev, pager, next"
          @current-change="pageIndexChange()"
          :current-page.sync="page"
          :page-count="totalPage"
        ></el-pagination>
      </el-row>
    </el-row>

    <!-- 重要对话框 -->
    <!-- 修改车辆信息 -->
    <el-dialog title="编辑车辆" :visible.sync="mMdfycarDialog" width="30%">
      <el-form ref="addForm" :model="mSelectRow" :rules="mAddRowFormRules" label-width="80px">
        <el-form-item label="车辆状态" prop="carStatus">
          <el-radio-group v-model="mSelectRow.carStatus">
            <el-radio label="normal">正常</el-radio>
            <el-radio label="disable">禁用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="型号" prop="name">
          <el-input placeholder="请输入型号" v-model="mSelectRow.name"></el-input>
        </el-form-item>
        <el-form-item label="品牌" prop="brand">
          <el-input placeholder="请输入品牌" v-model="mSelectRow.brand"></el-input>
        </el-form-item>
        <el-form-item label="车牌" prop="chepai">
          <el-input placeholder="请输入车牌号" v-model="mSelectRow.chepai"></el-input>
        </el-form-item>
        <el-form-item label="座位数" prop="sites">
          <!-- <el-input placeholder="请输入座位数" v-model="mSelectRow.sites"></el-input> -->
          <el-input-number v-model="mSelectRow.sites" :min="1" :max="10" label="请输入座位数"></el-input-number>
        </el-form-item>
        <el-form-item label="保养日期" prop="dateBaoyang">
          <el-date-picker
            v-model="mSelectRow.dateBaoyang"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择保养日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="保险日期" prop="dateBaoxian">
          <el-date-picker
            v-model="mSelectRow.dateBaoxian"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择保险日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="车检日期" prop="dateChejian">
          <el-date-picker
            v-model="mSelectRow.dateChejian"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择车检日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="封面" prop="avator">
          <el-upload
            class="avatar-uploader"
            :action="mPostFileUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="mAvator" :src="mAvator" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="mMdfycarDialog = false">取 消</el-button>
        <el-button type="primary" @click="mdfyCar()">保 存</el-button>
      </span>
    </el-dialog>

    <!-- 添加车辆信息 -->
    <el-dialog title="添加车辆" :visible.sync="mAddCarDialog" width="30%">
      <el-form ref="addForm" :model="mSelectRow" :rules="mAddRowFormRules" label-width="80px">
        <el-form-item label="型号" prop="name">
          <el-input placeholder="请输入型号" v-model="mSelectRow.name"></el-input>
        </el-form-item>
        <el-form-item label="品牌" prop="brand">
          <el-input placeholder="请输入品牌" v-model="mSelectRow.brand"></el-input>
        </el-form-item>
        <el-form-item label="车牌" prop="chepai">
          <el-input placeholder="请输入车牌号" v-model="mSelectRow.chepai"></el-input>
        </el-form-item>
        <el-form-item label="座位数" prop="sites">
          <!-- <el-input placeholder="请输入座位数" v-model="mSelectRow.sites"></el-input> -->
          <el-input-number v-model="mSelectRow.sites" :min="1" :max="10" label="请输入座位数"></el-input-number>
        </el-form-item>
        <el-form-item label="保养日期" prop="dateBaoyang">
          <el-date-picker
            v-model="mSelectRow.dateBaoyang"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择保养日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="保险日期" prop="dateBaoxian">
          <el-date-picker
            v-model="mSelectRow.dateBaoxian"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择保险日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="车检日期" prop="dateChejian">
          <el-date-picker
            v-model="mSelectRow.dateChejian"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择车检日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="封面" prop="avator">
          <el-upload
            class="avatar-uploader"
            :action="mPostFileUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="mAvator" :src="mAvator" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="mAddCarDialog = false">取 消</el-button>
        <el-button type="primary" @click="addCar()">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<style >
.topHeader {
  height: 40px;
  max-height: 40px;
  border-bottom: solid;
  border-width: 1px;
  border-color: #dcdfe6;
}
.leftMenu {
  /* position: absolute; */
  top: 0;
  left: 0;
  min-height: 100%;
  height: auto;
}
.height100 {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  height: auto;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>



<script>
import { getRequestHeader, loginApi, getThirdCompanyApi } from "../api/user.js";
import { getNowFormatDate, getWeekToday, isBlankApi } from "../api/util.js";
import { updateCarApi, addCarApi, getCarsApi } from "../api/car.js";
import {
  queryControllerOrdersApi,
  getDriversApi,
  dispatchOrderApi,
  dispatchThirdCompanyApi,
  closeOrderApi
} from "../api/order.js";
import { uploadFileApi } from "../api/storage.js";
import { Loading } from "element-ui";
export default {
  data() {
    var validateNumber = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入数字"));
      } else {
        const reg = /^\+?[1-9][0-9]*$/;
        var b = reg.test(value);
        if (!b) {
          callback(new Error("请输入合法的数字"));
        } else {
          callback();
        }
      }
    };
    return {
      mTableData: [],
      page: 1,
      totalPage: 0,
      pagesize: 10,
      mSearchKey: undefined,
      mFilter: {},
      mTableLoading: false,
      mDispatchDialog: false,
      mSelectRow: {},
      mThirdDispatchDialog: false,
      mCdmMap: [],
      mDrivers: [],
      mCars: [],
      mThridCompany: [],
      mCloseDialog: false,
      mMdfycarDialog: false,
      mMdfycarBean: {},
      mAddCarDialog: false,
      mPostFileUrl: undefined,
      mAvator: undefined,
      mAddRowFormRules: {
        name: [
          { required: true, message: "请输入型号", trigger: "blur" },
          { min: 1, max: 20, message: "不超过20字", trigger: "blur" }
        ],
        brand: [
          { required: true, message: "请输入品牌", trigger: "blur" },
          { min: 1, max: 20, message: "不超过20字", trigger: "blur" }
        ],
        chepai: [
          { required: true, message: "请输入车牌", trigger: "blur" },
          { min: 1, max: 20, message: "不超过20字", trigger: "blur" }
        ],
        sites: [{ required: true, validator: validateNumber, trigger: "blur" }],
        dateBaoyang: [
          { required: true, message: "请选择日期", trigger: "blur" }
        ],
        dateBaoxian: [
          { required: true, message: "请选择日期", trigger: "blur" }
        ],
        dateChejian: [
          { required: true, message: "请选择日期", trigger: "blur" }
        ],
        avator: [{ required: true, message: "请选择车辆封面", trigger: "blur" }]
      }
    };
  },
  created() {
    this.mPostFileUrl = getRequestHeader().fileHost;
  },
  mounted() {
    this.getCars();
  },
  methods: {
    showFullLoading() {
      this.mFullLoading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    clsoeFullLoading() {
      if (this.mFullLoading) {
        this.mFullLoading.close();
      }
    },
    getDrivers() {
      var that = this;
      getDriversApi(
        getRequestHeader(),
        new (function() {
          this.success = function(data) {
            that.mDrivers = that.refreshDrivers(data);
          };
          this.fail = function(msg) {};
        })()
      );
    },
    getCars() {
      var that = this;
      that.showFullLoading();
      getCarsApi(
        that.page,
        that.pagesize,
        this.mFilter,
        getRequestHeader(),
        new (function() {
          this.success = function(data) {
            // that.mCars = data;
            that.clsoeFullLoading();
            that.page = data.currentPage;
            that.totalPage = data.totalPage;
            that.mCars = that.refreshCars(data.list);
          };
          this.fail = function(msg) {
            that.clsoeFullLoading();
          };
        })()
      );
    },
    refreshCars(lst) {
      var that = this;
      var result = [];
      lst.forEach(element => {
        if (element.carStatus == "normal") {
          element.strStatus = "正常";
        } else if (element.carStatus == "disable") {
          element.strStatus = "不可用";
        } else {
          element.strStatus = "未知";
        }
        result.push(element);
      });
      return result;
    },
    refreshDrivers(lst) {
      var that = this;
      var result = [];
      lst.forEach(element => {
        if (
          that.mSelectRow.id != element.orderId &&
          element.status == "using"
        ) {
        } else {
          result.push(element);
        }
      });
      return result;
    },

    mdfyCar() {
      var that = this;

      this.$refs["addForm"].validate(valid => {
        if (valid) {
          var car = that.mSelectRow;
          that.showFullLoading();
          updateCarApi(
            car,
            getRequestHeader(),
            new (function() {
              this.fail = function(msg) {
                that.clsoeFullLoading();
                that.$message.error(msg);
              };
              this.success = function(data) {
                that.clsoeFullLoading();
                that.mMdfycarDialog = false;
                that.getCars();
              };
            })()
          );
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    addCar() {
      var that = this;

      this.$refs["addForm"].validate(valid => {
        if (valid) {
          var car = that.mSelectRow;
          that.showFullLoading();
          addCarApi(
            car,
            getRequestHeader(),
            new (function() {
              this.fail = function(msg) {
                that.clsoeFullLoading();
                that.$message.error(msg);
              };
              this.success = function(data) {
                that.clsoeFullLoading();
                that.mAddCarDialog = false;
                that.getCars();
              };
            })()
          );
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    pageIndexChange() {
      this.getCars();
    },
    handleAvatarSuccess(res, file) {
      // console.log("handleAvatarSuccess ");
      console.log(res);
      // console.log(file);
      this.mAvator = getRequestHeader().fileServer + "/" + res.data;
      this.mSelectRow.avator = res.data;
      console.log(this.mAvator);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    showRow(row) {
      console.log(row);
      this.mSelectRow = row;
      this.mMdfycarDialog = true;
      this.mAvator = getRequestHeader().fileServer + "/" + row.avator;
    },
    searchCar() {
      this.mFilter.searchKey = this.mSearchKey;
      this.getCars();
    }
    //----------over methods------
  }
};
</script>